import '../../style/resource.less';
import React, {
	Component
} from 'react'
import {
	observer
} from 'mobx-react';
import {
	WhiteSpace,
	Flex,
	Icon,
	Bubble,
	Modal,
	Tools,
} from "weaver-mobile";
import {
	withRouter
} from 'react-router-dom';
const alert = Modal.alert;
const getLabel = Tools.getLabel;

const isIconShow = (value) => {
	const r1 = !value,
		r2 = value.indexOf('*') > -1;

	const rules = [r1, r2];

	if (rules.some(rule => rule)) {
		return false;
	}

	return true;
}

const cases = (params) => {
	const {
		type,
		api,
		config
	} = params;

	const handleClick = () => {
		if (window.em) {
			const configs = {
				fail: (argument) => {
					Bubble.error('失败', 1, {
						top: '50%',
						color: 'red'
					});
				}
			};

			Object.assign(configs, config);
			window.em.checkJsApi(api) && window.em[api](configs);
		}
	}

	return <Icon type={type} size='xs' onClick={() => {
		if (type === 'blog-mail-o') {
			onMailClick(config.id,handleClick)
		}else{
			handleClick()
		}
	}}/>
}

const onMailClick = (value, callback) => {
	alert('', <p style={{paddingTop:10}}>{getLabel(507351, '是否使用OA发邮件？')}</p>, [{
		text: getLabel(507352, '使用手机邮箱'),
		onPress: callback
	}, {
		text: getLabel(826, '确定'),
		onPress: () => window.em && window.em.openLink && window.em.openLink({
			url: `/spa/email/static4mobile/index.html#/new?fromPage=hrmCard&internaltonew=${window.encodeURI(`[{id:${value},type:"resource"}]`)}`,
			openType: 2,
			sysId: window.localStorage.emobile_ec_id
		})
	}])
}

const getTextFromHTMLString = (value) => {
	const start = value.indexOf('>'),
		end = value.lastIndexOf('<');

	if ([start, end].every(val => val > -1)) {
		return value.substring(start + 1, end);
	} else {
		return value
	}

}

@withRouter
@observer
export default class Info extends Component {
	getIcons = (type, value) => {
		const {
			store
		} = this.props;

		const {
			setMobile,
			setTelephone,
			setEmail,
			hasmailto,
			fuckCall,
			hrmId,
			mailAuth,
		} = store;

		const _value = getTextFromHTMLString(value);

		switch (type) {
			case 'mobile':
				setMobile(_value);
				if (fuckCall === 'EM') {
					return cases({
						type: 'mobile-phone',
						api: 'tel',
						config: {
							tel: _value
						}
					});
				}
				if (fuckCall === 'weChart') {
					return (<a href={`tel:${_value}`}>
						<Icon type='mobile-phone' size='xs'/>
					</a>)
				}
				break;
			case 'telephone':
				setTelephone(_value);
				if (fuckCall === 'EM') {
					return cases({
						type: 'telephone',
						api: 'tel',
						config: {
							tel: _value
						}
					});
				}
				if (fuckCall === 'weChart') {
					return (
						<a href={`tel:${_value}`}>
							<Icon type='telephone' size='xs'/>
						</a>
					)
				}
				break;
			case 'mobilecall':
				if (fuckCall === 'EM') {
					return cases({
						type: 'telephone',
						api: 'tel',
						config: {
							tel: _value
						}
					});
				}
				if (fuckCall === 'weChart') {
					return (
						<a href={`tel:${_value}`}>
							<Icon type='telephone' size='xs'/>
						</a>
					)
				}
			case 'email':
				setEmail(_value);
				return (hasmailto && mailAuth) && cases({
					type: 'blog-mail-o',
					api: 'mailto',
					config: {
						mail: _value,
						id: hrmId,
					}
				});
				break;
		}
	}



	handleClick = (id, labelType) => {
		switch (labelType) {
			case 'superior':
				if (!window.em.checkJsApi('openLink')) return;
				window.em.openLink({
					url: `/spa/hrm/static4mobile/index.html#/resourceInfo/${id}`,
					openType: 2,
					sysId: window.localStorage.emobile_ec_id
				});
				break;
			case 'subordinate':
				this.props.history.push(`/subordinate/${id}`)
				break;
		}
	}

	render() {
		const {
			store
		} = this.props;
		const {
			listInfo,
			fuckCall,
		} = store;

		const PlaceHolder = ({
			className = '',
			...restProps
		}) => {
			return <div className={className}>{restProps && restProps.children}</div>
		}
		return (
			<div>{
					listInfo && listInfo.map( (info,blockIndex) => {
						const {
							title,
							items
						} = info;

						return (
							 <div key={blockIndex}>
							 	<div className='info'>
							 		<Flex wrap='wrap'>
								 		<div className='info-title'>{title}</div>
											<div className='info-item'>{
								 			items.map( (item, itemIndex) => {
												const {
													label,
													value,
													type,
													isHtml,
													id,
													labelType,
												} = item;

								 				return (
								 					<Flex key={itemIndex} className='info-item-row'>
								 						<PlaceHolder className='info-item-label hrm-over-flow'>
								 							<span>{`${label}: `}</span>
								 						</PlaceHolder>
								 						<PlaceHolder className='info-item-value'>
								 							{
								 								isHtml ? <span 
								 											onClick={() => this.handleClick(id,labelType)} 
								 											className={(fuckCall === 'EM') ? 'info-item-value-link':'' }>
								 										{value}
								 										</span>:
								 										<span 
									 										dangerouslySetInnerHTML={{__html: value}} 
									 										className={ ( (labelType === 'subordinate' && fuckCall === 'EM') || (value.indexOf("weaver.file.FileDownload") > -1) ) ? 'info-item-value-link' : ''} 
									 										onClick={e => {
									 											if (value.indexOf("weaver.file.FileDownload") == -1) {
										 											this.handleClick(id,labelType);
										 											 e.preventDefault()
										 										}
									 										} }
								 										/>
								 							}
								 						</PlaceHolder>
								 						<PlaceHolder className='info-item-icon'>{
								 							this.getIcons(type,value)
								 						}</PlaceHolder>
								 					</Flex>
								 				)
								 			})
								 		}</div>
							 		</Flex>
							 	</div>
							 	<WhiteSpace size='md' />
							 </div>
						)
					})
				}</div>
		)
	}
}